/*
 * @Author: liuying 247220246@qq.com
 * @Date: 2025-01-14 16:48:51
 * @LastEditors: liuying 247220246@qq.com
 * @LastEditTime: 2025-03-19 11:03:50
 * @FilePath: \my-book-react\src\pages\home\compoments\popular\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React from 'react';
import { useNavigate } from 'react-router-dom';
import style from './index.module.scss';
// import { Card } from 'antd-mobile';
import { Space, Card, Grid } from '@/bases';
import BookCover from '@/components/bookCover';
import { useRequest } from '@/hooks/useRequest';
import api from '@/pages/home/api';
import { IHomeData } from '@/pages/home/types';
import { px2rem } from '@/utils/unit';
const Popular: React.FC = React.memo(() => {
  const navigate = useNavigate();
  const { data } = useRequest<IHomeData>({ url: api.getHomeData });
  // console.log(data);
  const renderContent = () => {
    return data?.popular.map((book) => (
      <Grid.Item key={book.bookId} onClick={() => navigate(`/book/${book.bookId}`)}>
        <Space gap={px2rem(12)}>
          <BookCover src={book.coverImg} alt={book.title} />
          <Space direction="vertical" justify="between" gap={px2rem(12)}>
            <div className={style.bookName}>{book.title}</div>
            <div className={style.desc}>{book.desc}</div>
            <div className={style.meta}>
              {book.author}·{book.categoryName}
            </div>
          </Space>
        </Space>
      </Grid.Item>
    ));
  };

  const onHeaderClick = () => {
    navigate('book-list/popular');
  };
  return (
    <div className={style.popular}>
      <Card title="热门精选" extra="更多" onHeaderClick={onHeaderClick} headerClassName={style.header}>
        <Grid columns={1} gap={px2rem(24)}>
          {renderContent()}
        </Grid>
      </Card>
    </div>
  );
});
export default Popular;
